<!-- 个人信息-基础资料 -->
<template>
  <div v-loading="loading" class="gl_contentBox personal">
    <el-row>
      <el-col>
        <el-form ref="createRegisterInput" :model="createRegisterInput" :rules="createRegisterInput_Rules" label-width="106px">
          <el-row :gutter="40">
            <div style="width:210px;float:left" class="gl_ml_20">
              <el-form-item label="头像" prop="imagePath">
                <div class="box">
                  <img v-if="createRegisterInput.imagePath" :src="getStaticFileUrl(createRegisterInput.imagePath)" style="width:100%;height:100%">
                  <img v-else src="@/assets/images/person_default.png" alt="" style="width:100%;height:100%">
                </div>
              </el-form-item>
            </div>
            <div style="width:255px;float:left" class="gl_ml_15">
              <el-row>
                <span class="label">账号名称</span>
                <span class="content">{{ userPhoneNumber ? userPhoneNumber : '- -' }}</span>
              </el-row>
              <el-row>
                <span class="label">性别</span>
                <span v-if="createRegisterInput.genderCode" class="content">
                  <template v-for="item in dict.gender">
                    {{ item.code === createRegisterInput.genderCode ? item.value: '' }}
                  </template>
                </span>
                <span v-else class="content">- -</span>
              </el-row>
              <el-row>
                <span class="label">民族</span>
                <span class="content">{{ createRegisterInput.national ? createRegisterInput.national : '- -' }}</span>
              </el-row>
            </div>
            <div style="width:400px;float:left">
              <el-row>
                <span class="label">证件类型</span>
                <span v-if="createRegisterInput.idCardTypeCode" class="content">
                  <template v-for="item in dict.idCardType">
                    {{ item.code === createRegisterInput.idCardTypeCode ? item.value: '' }}
                  </template>
                </span>
                <span v-else class="content">- -</span>
              </el-row>
              <el-row>
                <span class="label">证件号码</span>
                <span class="content">{{ createRegisterInput.idCardNumber ? createRegisterInput.idCardNumber : '- -' }}</span>
              </el-row>
              <el-row>
                <el-form-item label="身份标签" prop="registerTags" label-width="70px">
                  <span v-for="tag in tagList" :key="tag.id">
                    <el-tag size="mini gl_mr_10">{{ tag.registerTagType.name }}</el-tag>
                  </span>
                  <el-tag size="mini" style="cursor: pointer" @click="addTag">+</el-tag>
                </el-form-item>
              </el-row>
            </div>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="中跆协会员号" prop="ctaMemberId">
                <el-input v-model="createRegisterInput.ctaMemberId" placeholder="请输入中跆协会员号" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="省跆协会员号" prop="ptkCode">
                <el-input v-model="createRegisterInput.ptkCode" placeholder="请输入省跆协会员号" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="createRegisterInput.name" placeholder="请输入姓名" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="联系方式" prop="phoneNumber">
                <el-input v-model="createRegisterInput.phoneNumber" placeholder="请输入联系方式" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="详细地址" prop="addressData">
                <el-cascader ref="cascader" v-model="createRegisterInput.addressData" size="mini" :options="cache.district" :props="{ value: 'name', label: 'name' }" placeholder="请选择省市区" style="width: 100%;" @change="changeAddressData" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-form-item label="" prop="address">
                <el-input v-model="createRegisterInput.address" placeholder="请输入详细地址" type="text" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="实名认证">
              <el-button v-if="!createRegisterInput.isApproved" type="primary" size="mini" @click="goRealName">去认证</el-button>
              <div v-else-if="createRegisterInput.isApproved == null" class="gl_color_warning">
                <span>等待审核</span>
              </div>
              <div v-else class="gl_color_success">
                <i class="el-icon-success" />
              </div>
            </el-form-item>
          </el-row>
          <el-row :gutter="40">
            <el-col :span="12">
              <el-divider />
            </el-col>
          </el-row>
          <el-row :gutter="40">
            <el-col :offset="10" :span="2">
              <el-button :loading="buLoading" type="primary" size="mini" @click="updateInfo">确定</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <add-tag ref="addTag" />
    <realName ref="realName" :create-register-input="createRegisterInput" />
  </div>
</template>

<script>
import {
  api_GET_EventsManagementRegisterId,
  api_PUT_EventsManagementRegisterId
} from '@/extend/api/gameswaggerApi/app.js';
import {
  SiSTKWEventsManagementCreateRegisterInput,
  Api_GET_EventsManagementRegisterIdQO
} from '@/lib/form/game/swaggerForm';
import validator from '@/lib/validate/index.js';
import { mapState, mapActions } from 'vuex';
import addTag from './addTag';
import { CopyData } from '@/lib';
import realName from './realName';
export default {
  name: 'Personal',
  components: {
    addTag,
    realName
  },
  props: {
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: false,
      buLoading: false, // 按钮的loading
      createRegisterInput: new SiSTKWEventsManagementCreateRegisterInput(),
      Api_GET_EventsManagementRegisterIdQO: new Api_GET_EventsManagementRegisterIdQO(),
      tagList: [], // 已添加的角色标签列表
      userPhoneNumber: '', // 账号名称
      createRegisterInput_Rules: {
        name: [
          validator.required('姓名不能为空')
        ],
        phoneNumber: [
          validator.required('手机号码不能为空'),
          {
            validator(rule, value, callback) {
              callback(validator.checkPhone(value, '手机号码格式不正确'));
            },
            trigger: 'blur'
          }
        ],
        addressData: [
          validator.required('请选择省市区')
        ],
        address: [
          validator.required('详细地址不能为空')
        ]
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache
    })
  },
  watch: {
    isShow: {
      handler: function(val) {
        if (val) {
          this.getInfo();
          this.getDict();
          this.getDictByType(['district']);
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
  },
  methods: {
    ...mapActions({
      getDict: 'dict/getDict',
      getDictByType: 'dict/getDictByType'
    }),
    // 获取个人信息
    getInfo() {
      this.loading = true;
      var that = this;
      that.Api_GET_EventsManagementRegisterIdQO.IncludeTags = true;
      that.Api_GET_EventsManagementRegisterIdQO.IncludeDelegation = true;
      api_GET_EventsManagementRegisterId(that.$route.query.id, that.Api_GET_EventsManagementRegisterIdQO).then(res => {
        CopyData(res, that.createRegisterInput);
        if (res.provinceCode) {
          that.$set(that.createRegisterInput, 'addressData', [res.provinceCode, res.cityCode, res.countyCode]); // 回显
        }
        that.tagList = res.registerTags;
        that.userPhoneNumber = res.registerUser.userPhoneNumber;
        that.loading = false;
      }).catch(() => {
        that.loading = false;
      });
    },
    // 改变地址
    changeAddressData() {
      this.createRegisterInput.provinceCode = this.createRegisterInput.addressData[0] || '';
      this.createRegisterInput.cityCode = this.createRegisterInput.addressData[1] || '';
      this.createRegisterInput.countyCode = this.createRegisterInput.addressData[2] || '';
    },
    // 打开添加标签弹窗
    addTag() {
      this.$refs.addTag.open();
    },
    // 更新个人信息
    updateInfo() {
      this.buLoading = true;
      var that = this;
      that.loading = true;
      this.$refs['createRegisterInput'].validate((valid) => {
        if (valid) {
          api_PUT_EventsManagementRegisterId(this.$route.query.id, this.createRegisterInput).then(res => {
            this.$message({
              type: 'success',
              message: '更新成功'
            });
            that.getInfo();
            that.loading = false;
          }).catch(() => {
            that.loading = false;
          });
        }
      });
      that.loading = false;
      this.buLoading = false;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 进行实名认证
    goRealName() {
      this.$refs.realName.open();
    }
  }
};
</script>

<style scoped>
.personal{
  color: #333;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.09);
}
/* .el-form>>>.el-form-item label:after {
  content: " ";
  display: inline-block;
  width: 100%;
}
.el-form>>>.el-form-item__label {
  text-align: justify;
  height: 30px;
} */
.box{
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
}
.el-form>>>.el-form-item {
  margin-bottom: 10px;
}
.el-cascader {
  width: 100%;
}
.label {
  text-align: right;
  font-weight: 700;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>
